postcss-safe-parser

What is postcss-safe-parser?

The postcss-safe-parser package is a fault-tolerant CSS parser that can handle CSS with syntax errors. It is designed to be used with PostCSS, a tool for transforming CSS with JavaScript plugins. The safe parser can parse CSS files and recover from syntax errors gracefully, allowing developers to work with CSS that may not be perfectly formatted or may contain mistakes.

What are postcss-safe-parser's main functionalities?

Fault-tolerant CSS parsing

This feature allows developers to parse CSS with syntax errors without stopping the process. The provided code sample demonstrates how to use postcss-safe-parser with PostCSS to process a CSS string.

const postcss = require('postcss');
const safeParser = require('postcss-safe-parser');

postcss()
  .process('a { color: red; }', { parser: safeParser })
  .then(result => {
    console.log(result.css);
  });

Other packages similar to postcss-safe-parser

postcss

PostCSS itself is a tool for transforming CSS with JavaScript plugins. While it is not a parser, it uses different parsers like postcss-safe-parser to handle CSS. It is more of an ecosystem than a simple parser and provides a wide range of plugins for various tasks.

css-tree

css-tree is a CSS parser that also allows for walking and manipulation of the parsed CSS AST (Abstract Syntax Tree). It is similar to postcss-safe-parser in that it can parse CSS, but it does not specifically focus on fault tolerance.

stylelint

stylelint is a modern linter that helps you avoid errors and enforce conventions in your styles. It uses PostCSS and its parsers for parsing CSS. While not a parser itself, it is related in functionality as it needs to parse CSS to lint it.

gonzales-pe

gonzales-pe is a CSS parser with a focus on performance and a rich API for traversing and manipulating the parsed CSS. Unlike postcss-safe-parser, it does not emphasize safe parsing of erroneous CSS.

README

PostCSS Safe Parser

A fault-tolerant CSS parser for PostCSS, which will find & fix syntax errors, capable of parsing any input. It is useful for:

• Parse legacy code with many hacks. For example, it can parse all examples from Browserhacks.
• Works with demo tools with live input like Autoprefixer demo.

Usage

var safe   = require('postcss-safe-parser');
var badCss = 'a {';

postcss(plugins).process(badCss, { parser: safe }).then(function (result) {
    result.css //= 'a {}'
});

Changelog

4.0.2

• Fix parsing :;.